<template>
    <!-- 收货地址-->
    <div class="address-box">
        <el-card style="width: 80%">
            <el-row class="flex-center">
               <h3> 收货地址</h3>
               
            </el-row>
            <el-row class="flex-center"><el-button size="middle" style="margin-left: 12px;" type="primary" @click="addAddress">新增地址</el-button></el-row>
            <el-row>
                <div class="address-container">
                    <el-table :border="true"  ref="multipleTable" :data="addressList" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column  align="center" type="index" label="序号" width="55">
                        </el-table-column>
                        <el-table-column align="center" label="收货人" prop="recipient_name" width="120">
                        </el-table-column>
                        <el-table-column align="center" prop="recipient_phone" label="收货人电话" width="120">
                        </el-table-column>
                        <el-table-column align="center" prop="address" label="收货地址" >
                        </el-table-column>
                       
                        <el-table-column align="center" width="120" prop="is_default" label="默认地址">
                            <template v-slot="{row}">
                               <el-tag  style="cursor:pointer" type="success" v-if="row.is_default">默认</el-tag>
                               <el-tag style="cursor:pointer" title="点击修改为默认地址" @click="changeDefault(row)" type="primary" v-else>否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" width="120"  label="操作">
                            <template v-slot="{row}">
                                <el-link :underline="false" type="primary" @click="edit(row)">编辑</el-link>
                                <el-link style="margin-left:10px" :underline="false" type="danger" @click="deleteAddress(row)">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-row>
        </el-card>
            <!-- 弹框 -->
    <AddDialog
      :storeData="storeForm"
      :title="title"
      v-if="addVisible"
      :visible.sync="addVisible"
      @confirm="addStoreConfirm"
    ></AddDialog>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { generateTextAvatar } from "@/utils/generateTextAvatar";
import AddDialog from "./components/AddDialog";
import { getAllAddressByUserId, updateAddress,deleteAddress,getInfo, updateInfo } from "@/api/user";
export default {
    components: {
        AddDialog
    },
    data() {
        return {
            addressList: [],
            addVisible: false,
      title: "新增地址",
      storeForm: {},
        };
    },
    computed: {
        ...mapState("user", ["token"]),
        ...mapGetters(["sidebar", "avatar", "name"]),

    },
    mounted() {
        this.getAllAddressByUserId();
    },
    methods: {
   
        
      async  changeDefault(row){
        this.$confirm('确认设置该地址为默认地址吗？ 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {

            const params={
                address_id:row.address_id,
                user_id:+this.token,
                is_default:1
            }
            const res=await updateAddress(params)
           if(res.status===0){
            this.$message({
                type: "success",
                message: "修改默认地址成功"
            });
               this.getAllAddressByUserId()
           }else{
            this.$message.error("修改失败！");
           }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

          
        },
        async getAllAddressByUserId() {
            if(!this.token){
                this.$message.warning("请先登录！");
                return this.$router.push('/login')
            }
            const { data: res } = await getAllAddressByUserId(+this.token);

            this.addressList = res || []
        },
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteAddress(row){
        this.$confirm('确认删除此地址吗？ 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
           const res=await deleteAddress(row.address_id)
           if(res.status===0){
            this.$message({
                type: "success",
                message: "删除地址成功"
            });
               this.getAllAddressByUserId()
           }else{
            this.$message.error("删除失败！");
           }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      addAddress() {
      this.title = "新增地址";
      this.addVisible = true;
      this.storeForm = {};
    },
    edit(row) {
      this.title = "修改地址";
      this.addVisible = true;
      this.storeForm = row;
    },
    addStoreConfirm() {
      //刷新列表
      this.getAllAddressByUserId();
    },

    },
};
</script>

<style scoped lang="scss">
.address-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;

    .el-card {
        padding: 20px;

        .flex-center {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
         
        }
    }
}

.btn-list {
    display: flex;
    justify-content: center;

    .el-button {
        width: 200px;
    }
}
</style>